// define the namespace
syslib.namespace("syslib.ui");

// tag conversor
syslib.ui.ButtonTag = __class(syslib.ui.TagConversor, {
	component : null,
	
	execute : function(){
		// create the button
		var button = new syslib.ui.Button({
			title : (__valid(this.__attributes.title)) ? this.__attributes.title : false,  
			innerHTML : false,
			aditionalAttributes : this.__attributes
		});
		
		// append the button
		button.appendTo(this.__container);
		
		// store the component
		this.component = button;
	},

	getComponent : function(){
		// set the form
		return this.component;
	}
});

// component definition
syslib.ui.Button = __class(syslib.ui.UIComponent, {
	// class attributes
	id : "",
	title : "",  
	name : "", 
	image : null, 
	innerHTML : "", 
	options : {}, 
	
	aditionalAttributes : {}, 
	
	button : null, 
	references : null, 
	
	__construct : function(options){
		// format the options
		options = syslib.object.extend({}, options);

		// clear the attributes
		this.id 	= "";
		this.title 	= "";
		this.name 	= "";
		this.image 	= null;
		this.innerHTML				= "";
		this.aditionalAttributes 	= {};
		
		// store the options
		this.options = options;
		  
		// load the style
		syslib.loadStyleForComponent("button");

		// set some important information
		this.id 	= (__valid(options.id)) ? options.id : syslib.element.generateID();
		this.title 	= (__valid(options.title)) ? options.title : false;
		this.name 	= (__valid(options.name)) ? options.name : this.id;
		
		// set the innerHTML
		if(__valid(this.options.innerHTML)){
			this.innerHTML = this.options.innerHTML;
		} else {
			if(__valid(this.image)){
				this.innerHTML = "<img src='"+this.image+"' />";
			}
			if(__valid(this.title)){
				this.innerHTML += this.title;
			}
		}
		
		// check for aditional attributes
		if(__valid(this.options.aditionalAttributes)){
			this.aditionalAttributes = this.options.aditionalAttributes;
		}
		
		// create the element
		this.__createElement();
	},
	
	__createElement : function(){
		// create the attributes of the main objectcount
		var attributes = __extend(this.aditionalAttributes, {
			"id" : this.id, 
			"class" : "syslib-button-container-normal syslib-text"
		});

		// create the json structure
		elemtJSON = ["span", attributes,
			this.innerHTML
		];

		// create the element
		var objectData 	= syslib.element.createFromJSON(false, elemtJSON);
		var button		= objectData.element;
		var references	= objectData.references;
		
		// create the events
		syslib.event.listen("mouseover", button, function(){
			button.className = "syslib-button-container-over syslib-text";
		});
		syslib.event.listen("mouseout", button, function(){
			button.className = "syslib-button-container-normal syslib-text";
		});
		syslib.event.listen("mousedown", button, function(){
			button.className = "syslib-button-container-clicked syslib-text";
		});
		syslib.event.listen("mouseup", button, function(){ 
			button.className = "syslib-button-container-over syslib-text";
		});
		if(__valid(this.options.onClick)){
			syslib.event.listen("click", button, this.options.onClick);
		}
		
		this.__element = button;
	},
	
	appendTo : function(container){
		// append the child
		container.appendChild(this.getElement());
		
		// find the form
		this.findForm();
	},
	
	appendChild : function(child){
		this.getElement().appendChild(child); 
	},
	
	findForm : function(){
		// get the form
		var dataForm = this.__findForm(this.__element);
		
		// add the form reference to the main element
		if(__valid(dataForm)){
			this.__element.form = dataForm;
		}
	}, 
	
	__findForm : function(elmt){
		// get the parent node
		var parent = elmt.parentNode;
		
		// check the parent integrity
		if(!__valid(parent) || parent.tagName.toLowerCase() == "body"){
			return false;
		}
		
		// check if the parent is a form
		if(parent.tagName.toLowerCase() == "form"){
			return parent;
		} else {
			return this.__findForm(parent);
		}
	}
});